<template>
  <div class="upload-demo-wrapper">
    <div class="component-example">
      <label class="example-title">使用示例</label>
      <div class="example">
        <s-upload text="上传文件" accept="application/msword" :fileNumLimit="3" :fileSingleSizeLimit="1024000" :multiple="true" :buttonStyle="{background:'red'}" buttonFloat="right" @change="uploadFile" @over-number="overFileNumber" @over-size="overFileSize"></s-upload>
      </div>
    </div>
    <div class="component-document">
      <div class="import-property">
        <label class="prop-title">输入属性</label>
        <ul class="prop-lists">
          <li class="prop-item" v-for="(item,index) in uploadProps" :key="index">
            <label class="prop-name">{{item.name}}：</label>
            <span class="prop-desc">{{item.desc}}</span>
          </li>
        </ul>
      </div>
      <div class="output-method">
        <label class="prop-title">输出方法</label>
        <ul class="prop-lists">
          <li class="prop-item" v-for="(item,index) in uploadMethods" :key="index">
            <label class="prop-name">{{item.name}}：</label>
            <span class="prop-desc">{{item.desc}}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  // import SUpload from '../../components/diy-components/Upload/SUpload'
  export default {
    name: 'UploadDemo',
    components:{
      // SUpload
    },
    data() {
      return {
        urls:{
          uploadUrl:remoteUrl + '/demo/test/file/upload', //  /single
        },
        //上传组件
        uploadProps: [
          { name: 'canUpload', desc: '默认值：true。是否可以上传，可上传，false：禁止上传。' },
          { name: 'text', desc: '默认值："导入文件"。按钮显示的文字。' },
          { name: 'accept', desc: '默认不限制。限制选择的文件类型。' },
          { name: 'fileNumLimit', desc: '默认值：100。上传最大数量，选择文件后在js中计算文件个数，并提示。' },
          { name: 'fileSingleSizeLimit', desc: '默认100M。单个文件大小限制。' },
          { name: 'formData', desc: '上传时传给后端的参数。' },
          { name: 'multiple', desc: '默认值：false。是否可多选文件，true：一次可选择文件，false：一次只能选择一个文件。' },
          { name: 'buttonStyle', desc: '默认值：undefined。button的样式。' },
          { name: 'buttonFloat', desc: '默认值："none"。button的浮动方式。' },
        ],
        uploadMethods: [
          { name: 'click', desc: '参数：点击事件默认event。点击按钮时触发。' },
          { name: 'over-number', desc: '参数：文件超过规定的文件数量的提示信息。选择的文件超过规定的文件数量时触发。' },
          { name: 'over-size', desc: '参数：文件超过规定的文件大小的提示信息。选择的文件超过规定的文件大小时触发。' },
          { name: 'change', desc: '参数：{ formData: formData, files: files }。选择文件发生变化时触发。' },
        ],
      }
    },
    mounted() {

    },
    methods: {
      overFileNumber(str){
        this.message(this,'warn',str)
      },
      overFileSize(str){
        this.message(this,'warn',str)
      },
       uploadFile(e){
         this.httpRequest('post',this.urls.uploadUrl,e.formData).then(res=>{
           console.log('上传文件成功 response',res);
         }).catch(err=>{

         })
       }
    },

  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .upload-demo-wrapper{
    width:100%;
    height:100%;
  }

</style>
